<template>
  <header-nav-bar :bool="true"></header-nav-bar>
  <van-form class="userForm" @submit="onSubmit">

    <van-cell-group inset>
      <van-field
          v-model="userInfo.master"
          name="master"
          label="master"
          placeholder="id"
          style="display: none"
      />
      <van-field
          v-model="userInfo.id"
          name="id"
          label="id"
          placeholder="id"
          style="display: none"
      />
      <van-field
          v-model="userInfo.username"
          name="username"
          label="业主名"
          placeholder="业主名"
          :rules="[{ required: true, message: '请填写业主名' }]"
      />
      <van-field
          v-model="userInfo.phone"
          :readonly="!idFlag"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请真实填写手机号如有问题可方便联系！' }]"
      />
      <van-field
          v-model="userInfo.communityText"
          is-link
          readonly
          name="community"
          label="当前小区"
          placeholder="点击选择小区名字"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
          v-model="userInfo.unitText"
          is-link
          readonly
          name="unit"
          label="单元楼"
          placeholder="点击选择单元楼"
          @click="unitShowPicker = true"
      />
      <van-popup v-model:show="unitShowPicker" position="bottom">
        <van-picker
            :columns="unitColumns"
            @confirm="unitOnConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
          v-model="userInfo.floor_room_number"
          name="floor_room_number"
          label="门牌号"
          placeholder="请填写楼层-门牌号"
          :rules="[{ required: true, message: '请填写楼层-门牌号' }]"
      />
      <van-field
          v-model="userInfo.idCard"
          name="idCard"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ validator: asyncValidator, required: true, message: '请填写身份证号' }]"
      />

    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>


</template>

<script setup lang="ts">
const headerNavBar = defineAsyncComponent(() =>
    import('@/components/HeaderNavBar.vue')
)
import {useRouter} from 'vue-router'
import {defineAsyncComponent, onMounted, reactive, ref} from "vue";
import {saveUserInfo} from '@/service/nucleicAcid.js'
import {route} from "vant/es/composables/use-route";
import {Toast} from "vant";
import {userStore} from '@/store/userStore.ts'


let router = useRouter()
const store = userStore()
const result = ref('');
const showPicker = ref(false);
const unitShowPicker = ref(false);
const columns = [
  {text: '北城未来C区', value: 'C'},
];

const unitColumns = [
  {text: '一单元', value: '1'},
  {text: '二单元', value: '2'},
  {text: '三单元', value: '3'},
  {text: '四单元', value: '4'},
  {text: '五单元', value: '5'},
];


const userInfo = reactive({
  id: "",
  master: false,
  username: "",
  phone: "",
  idCard: "",
  community: "",
  communityText: "",
  unit: "",
  unitText: "",
  floor_room_number: "",
})

const idFlag = ref(false)

onMounted(() => {
  let phone = router.currentRoute.value.query.phone
  userInfo.phone = phone

  let id = router.currentRoute.value.query.id
  userInfo.id = id
  if (id != undefined) {
    idFlag.value = true
    userInfo.master = false
  } else {
    idFlag.value = false
    userInfo.master = true
  }

})

const onConfirm = (selectedOptions: any) => {
  userInfo.communityText = selectedOptions.text
  userInfo.community = selectedOptions.value
  showPicker.value = false;
};

const unitOnConfirm = (selectedOptions: any) => {
  userInfo.unitText = selectedOptions.text
  userInfo.unit = selectedOptions.value
  unitShowPicker.value = false;
}


const onSubmit = async (values: any) => {
  console.log(values)
  let res = await saveUserInfo(values)
  if (res.data.code === 200) {
    Toast.success("保存成功！")
    store.userInfo = res.data.data
  } else {
    Toast.fail(res.data.msg)
  }

};


// 校验函数可以返回 Promise，实现异步校验
const asyncValidator = (idCard: any) =>
    new Promise((resolve) => {
      // TODO: 查询当前身份证号是否已经注册过了

      // let p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      // if (!p.test(idCard)) {
      //   resolve("请输入正确的身份证号码");
      // }
      resolve(true);
    });
</script>

<style scoped>
.userForm {
  position: absolute;
  top: 70px;
}
</style>